<template>
  <div>
    <el-button type="primary" class="btn" @click="add">添加</el-button>
    <v-list
      :listdata="listdata"
      :Userlistdata="Userlistdata"
      :obj="obj"
      @refresh="refresh"
      @change="change"
    ></v-list>
    <v-form :obj="obj" @refresh="refresh" ref="form" :roledata="roledata"></v-form>
  </div>
</template>

<script>
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { reqUsercount, reqUserlist,reqRolelist } from "../../request/api.js";
export default {
  components: { vList, vForm },
  data() {
    return {
      obj: {
        isshow: false,
        isadd: true,
        total: 1
      },
      listdata: [],
      // page:{total:""},
      Userlistdata: { size: 5, page: 1 },
      roledata: []
    };
  },
  methods: {
    add() {
      this.obj.isshow = true;
      this.obj.isadd = true;
    },
    // 刷新，重新渲染
    refresh() {
      reqUsercount().then(res => {
        this.obj.total = res.data.list[0].total;
      });
      reqUserlist(this.Userlistdata).then(res => {
        let userlength=res.data.list?res.data.list:[]
        if(userlength.length==0&&this.obj.total>0){
          this.Userlistdata.page--
          this.refresh()
        }
        this.listdata = res.data.list?res.data.list:[];

      });
    },
    change(uid) {
      this.$refs.form.change(uid);
    }
  },
  mounted() {
    this.refresh();
    reqRolelist().then(res => {
      this.roledata=res.data.list
    });
  }
};
</script>

<style>
</style>